<template>
	<div class="modal fade" id="linkM2Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="self-modal-dialog" style="width: 50vw;margin: auto;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" @click="linkM2ModalClose"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h2 class="modal-title text-center">关联M2楼盘</h2>
				</div>
				<div class="modal-body">
					<div class="main-content">
						<div class="row">
							<div class="col-sm-12 col-md-12">
								<form id="searchForm">
									<ul class="template-title-fls">
										<!-- <li>
										<select class="form-control-sm" style="width:135px;" v-model="params.linked">
											<option value="">全部关联情况</option>
											<option value="0">已关联</option>
											<option value="1">未关联</option>
										</select>
									</li> -->
										<li><input type="text" v-model="params.projectName" name="projectName" class="form-control-sm" placeholder="M2楼盘名" style="width:200px;" /></li>
										<li><button type="button" class="btn btn-default btn-theme" v-on:click="premsiesList('1')">查询</button></li>
									</ul>
								</form>
								<div class="table-responsive">
									<img src="../../assets/images/sigh.svg" style="width: 18px;padding-bottom: 3px;">
									<span class="tips">已关联M2的楼盘暂不支持解除关联，需手动删除渠道王楼盘以解除</span>
									<table class="table table-striped table-bordered min-width-790">
										<thead>
											<tr>
												<th width="20%">M2楼盘编码</th>
												<th width="30%">M2楼盘名称</th>
												<th width="30%">已关联渠道王楼盘</th>
												<th width="20%">操作</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(row, index) in rows" :key="index">
												<td>{{row.projectCode}}</td>
												<td>{{row.projectName}}</td>
												<td>
													<div v-if="row.premisesName">已关联：{{row.premisesName}}</div>
													<div v-else style="color:#f87242;">未关联</div>
												</td>
												<td>
													<button type="button" class="btn btn-default btn-theme" v-if="!row.premisesName" v-on:click="linkPremises(row.projectCode, row.projectName)">关联楼盘</button>
													<div v-else>-</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div id="laypage_link_m2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 确认关联 start -->
		<div id="linkM2Fade" class="black_overlay" style="z-index: 9999999;"></div>
		<div id="linkM2SureContent" class="white_content" style="z-index: 99999999;color:#E88037;width:450px !important;height:400px !important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background: #fff;">
			<div style="line-height: 33px;margin: 20px;">
				<div style="font-size: 17px;">
					<div style="color:#E88037;font-size: 20px;font-weight: bold;">是否确认关联楼盘</div>
					<div>M2楼盘：{{m2Name}}</div>
					<div v-if="this.$store.getters.premisesName">渠道王楼盘：{{this.$store.getters.premisesName}}</div>
				</div>
				<hr style="width:100%;height:1px;color:#666;margin: 10px 0;" />
				<div style="font-size: 15px;">
					关联后：<br />
					<span style="color: #666666;">
						1、针对该楼盘的报备会进行客户判重<br />
						2、客户到访后会自动转客到M2<br />
						3、M2客户交易状态变更会同步到渠道王<br />
						4、已关联的楼盘需删除渠道王楼盘以接触关联关系
					</span>
				</div>
			</div>
			<div style='position: absolute;bottom: 10px;right: 10px;text-align:right;width:100%;'>
				<button class="first_white_button1" style="background: #fff;border: 1px solid #ccc;color: #D7D7D7;margin-right: 10px;width:100px !important;" @click="closeModal">取消</button>
				<button class="first_white_button1" style="width:100px !important;" @click="sureLinked">确认关联</button>
			</div>
		</div>
		<!-- 确认关联 end -->
	</div>
</template>

<script>
export default {
  data() {
    return {
      rows: [],
      params: {
        pageNumber: 1,
        pageSize: 10,
        //linked: '',
        projectName: "",
      },
      projectCode: "",
      m2Name: "",
      name: "",
    };
  },
  components: {},
  watch: {
    "$store.getters.freshSelectUserData": {
      handler(val, oldVal) {
        if (val) {
          this.params = {
            pageNumber: 1,
            pageSize: 10,
            projectName: "",
          };
          this.premsiesList();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.closeModal();
    this.premsiesList();
  },
  methods: {
    sureLinked() {
      let premisesName = this.$store.getters.premisesName;
      if (!premisesName) {
        this.$store.commit("set_premisesName", this.m2Name);
      }
      this.$store.commit("set_projectCode", this.projectCode);
      this.$store.commit("freshSelectUserData", "");
      this.closeModal();
      this.linkM2ModalClose();
    },
    closeModal() {
      $("#linkM2Fade").hide();
      $("#linkM2SureContent").hide();
    },
    linkM2ModalClose() {
      this.$store.commit("set_freshSelectUserData", "");
      $("#linkM2Modal").modal("hide");
    },
    linkPremises(projectCode, m2Name) {
      this.m2Name = m2Name;
      this.projectCode = projectCode;
      $("#linkM2Fade").show();
      $("#linkM2SureContent").show();
    },
    premsiesList(flag) {
      var _self = this;
      if (flag) {
        this.params.pageNumber = 1;
        this.params.pageSize = 10;
      }
      var body = {};
      body.params = _self.params;
      var url = this.utilHelper.apiUrl + "/api/getM2Projects";
      this.$http.post(url, body).then(
        (response) => {
          var resData = response.body.resData;
          var total = resData.data.total;
          var totalPages = resData.data.totalPages;
          var current = resData.data.pageNumber;
          var rows = resData.data.rows;
          _self.rows = rows;
          //加载分页组件
          if (totalPages >= 0) {
            layui.laypage.render({
              elem: $("#laypage_link_m2"), //容器。值支持id名、原生dom对象，jquery对象,
              limit: _self.params.pageSize,
              curr: current,
              count: total,
              theme: "#f87242;", //皮肤
              first: "首页", //若不显示，设置false即可
              last: "尾页", //若不显示，设置false即可
              prev: "上一页", //若不显示，设置false即可
              next: "下一页", //若不显示，设置false即可
              layout: ["prev", "page", "next", "skip", "count"],
              jump: function(obj, first) {
                if (!first) {
                  _self.params.pageNumber = obj.curr;
                  _self.premsiesList();
                }
              },
            });
          }
        },
        (response) => {
          console.log("m2楼盘列表失败");
        }
      );
    },
  },
};
</script>
